<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册用户</title>
    <link rel="stylesheet" href="../public/css/login/comment.css" />
    <link rel="stylesheet" href="../public/css/login/register.css" />
  </head>

  <body>
    <div class="bear"></div>

    <div class="mound1"></div>

    <div class="mound2"></div>

    <div class="login-main w">
      <div class="login_title">
        <h2><a href="javascript:;" class="place"> Join ZhiLiao</a></h2>
      </div>
      <form action="/register" id="register_form" method="post">
        <div class="username">
          昵称 :
          <input
            type="text"
            name="nickname"
            id="nickname"
            placeholder="请设置用户名"
            autocomplete="off"
            required
            value=""
          />
        </div>
        <div class="email">
          邮箱 :
          <input
            type="text"
            name="email"
            id="email"
            placeholder="请输入邮箱"
            autocomplete="off"
            required
            value=""
          />
        </div>
        <div class="password">
          密码 :
          <input
            type="password"
            name="password"
            id="password"
            placeholder="请设置密码"
            autocomplete="off"
            required
            value=""
          />
        </div>
        <div class="gender">
          <label for="man">男 : </label>
          <input type="radio" id="man" value="1" name="gender" checked />
          <label for="girl">女 :</label>
          <input type="radio" id="girl" value="0" name="gender" />
        </div>
        <!-- 可以通过value值来获取出生日期 -->
        <div class="date">
          <label for="date">出生日期 :</label>
          <input type="date" id="date" class="birthday" />
        </div>

        <!-- 个人简介 -->
        <div class="personal">
          <label for="bio">个人介绍 : </label>
          <textarea name="bio" id="bio" cols="40" rows="2"></textarea>
        </div>

        <div class="button">
          <input type="submit" name="login" id="login" value="Join us" />
        </div>

        <div class="goback">
          <a href="/login">已有账号 >> </a>
        </div>
      </form>
    </div>
  </body>
  <script src="../public/js/src/jQuery.js"></script>
  <script>
    $("#register_form").on("submit", function (e) {
      e.preventDefault();
      var formData = $(this).serialize();
      // console.log(formData);
      $.ajax({
        url: "/register",
        type: "POST",
        data: formData,
        dataType: "json",
        success: function (data) {
          var err_code = data.err_code;
          if (err_code === 0) {
            window.alert("恭喜您，注册成功！");
            // 服务端重定向针对异步请求无效
            window.location.href = "/app";
          } else if (err_code === 1) {
            window.alert("邮箱或昵称已存在，请重新输入！");
          } else if (err_code === 500) {
            window.alert("服务器忙，请稍后重试！");
          }
        },
      });
    });
  </script>

  <script>
    $(".place").on("click", () => {
      // 箭头函数内，this的指向会发生变化
      window.alert("请注册用户!");
    });
  </script>
</html>
